<template>
	<view>
		<!-- 改 -->
		<!-- #ifndef H5 -->
		<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" title="直播" color="#ffffff"
			:backgroundColor="primaryColor">
		</uni-nav-bar>
		<!-- #endif -->
		<!-- 标签页 改-->
		<view style="position: sticky;top: 150rpx;background-color: #fff;z-index: 999;line-height: 10rpx;">
			<tab :list="tab_list" @change="handerTabChange" :activeIndex="tab_index" activeColor="#1DAF81"></tab>
		</view>
		<scroll-view style="height: 100vh;padding-top: 150rpx;" scroll-y="true" @scrolltolower="loadMoreData">
			<!-- 内容 -->
			<view class="content">
				<view class="content-list">

					<!-- 左 -->
					<view class="list-left" v-for="(item, index) in live_list" :key="item.id"
						@click="goLive(item.id,item)">
						<!-- 上 -->
						<view class="left-top">
							<view class="top-iconfont">
								<image class="top-icon" src="../static/live/live-image.png" mode="scaleToFill" />
							</view>
							<view class="top-text"> {{item.id}}{{ item.is_online == 1 ? "直播中" : "未开播" }}</view>
						</view>
						<!-- 下 -->
						<view class="left-bottom">
							<!-- 标题 -->
							<view class="bottom-title">{{ item.title }}</view>
							<view class="bottom-list">
								<view class="list-left-right">
									<view class="list-head">
										<!-- 头像问题 -->
										<!-- <image class="list-head-img" :src="item.coachs.work_img" mode="scaleToFill" /> -->
										<image class="list-head-img" :src="JSON.parse(item.anchorInfo).avatarUrl"
											mode="scaleToFill" />
									</view>
									<!-- <view class="list-nickname">{{ item.coachs.coach_name }}</view> -->
									<view class="list-nickname">{{ JSON.parse(item.anchorInfo).nickName }}</view>
								</view>
								<view class="list-left-right">
									<view class="list-people">{{ item.actionlist_count }}人</view>
									<view>在看</view>
								</view>
							</view>
						</view>
						<view class="bgimage">
							<image class="bgimage-image" :src="item.cover" mode="scaleToFill" />
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view :style="{ height: `${configInfo.tabbarHeight}px` }"></view>
		<tabbar :cur="8"></tabbar>
		<!-- #ifdef APP-PLUS -->
		<login-info></login-info>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		mapState,
	} from "vuex"
	import tabbar from "@/components/tabbar.vue"
	export default {
		data() {
			return {
				tab_list: [], // 标签页列表
				tab_index: 0,
				live_list: [], // 直播列表
				page: 0, // 分页
				new_list: [], // 控制下拉
			};
		},
		components: {
			tabbar
		},
		computed: mapState({

			pageActive: state => state.service.pageActive,
			activeIndex: state => state.service.activeIndex,
			tabList: state => state.service.tabList,
			param: state => state.service.param,
			list: state => state.service.list,
			banner: state => state.service.banner,
			service_cate: state => state.service.service_cate,
			recommend_list: state => state.service.recommend_list,
			recommend_style: state => state.service.recommend_style,
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			autograph: state => state.user.autograph,
			userInfo: state => state.user.userInfo,
			location: state => state.user.location,
			isGzhLogin: state => state.user.isGzhLogin,
			haveShieldOper: state => state.user.haveShieldOper,
		}),

		onShow() {
			var that = this
			this.getLiveCateList()
			this.getLiveList()
		},
		// onHide() {
		// 	this.tab_index = 0,
		// },
		methods: {

			// 下拉加载
			loadMoreData() {
				if (this.new_list.length == 0) return
				// console.log("我下拉了");
				this.getLiveList(this.tab_list[this.tab_index].id, ++this.page);
			},
			// 获取直播分类列表
			async getLiveCateList() {
				let res = await this.$api.live.getLiveCateList({
					id: 0
				})
				this.tab_list = res;
				this.tab_list.unshift({
					id: 0,
					title: "全部"
				})
				this.getLiveList()
			},
			// 获取直播列表
			async getLiveList(id = 0, page = 0) {
				let res = await this.$api.live.getLivelist({
						cate_id: 0,
						page
					})
				this.new_list = []
				this.live_list = this.live_list.concat(res); // 将新数据添加到list中
				this.new_list = res;
				console.log(res, '直播列表')
			},
			// 标签页切换
			handerTabChange(index) {
				this.live_list = []
				this.page = 0
				this.tab_index = index
				this.getLiveList(this.tab_list[index].id)
			},
			// 去看直播
			async goLive(live_id = "1", value) {
				if (value.is_online !== 1) {
					uni.showModal({
						content: "直播尚未开启！",
						showCancel: false
					});
				} else {
					let res = await this.$api.live['getUserLeave']({
						live_id
					})

					this.$util.goUrl({
						url: `/live/pages/index?id=` + live_id
					})
					this.tab_index = 0
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	// 第一个标签
	/deep/.tab-item:first-child {
		padding-left: 30rpx !important;
	}

	// 内容
	.content {
		padding: 30rpx;
		color: #fff;
	}

	// 内容列表
	.content-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	// 列表左
	.list-left {
		width: 48%;
		height: 445rpx;
		// background-color: red;
		background-size: cover;
		background-position: center;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		padding: 20rpx;
		position: relative;
		border-radius: 20rpx;
	}

	// 左上
	.left-top {
		z-index: 99;
		display: flex;
		justify-content: space-between;
		background-color: #5F5747;
		width: 122rpx;
		height: 42rpx;
		line-height: 42rpx;
		font-size: 22rpx;
		padding: 0 6rpx;
		border-radius: 10rpx;
	}

	// 图标空间
	.top-iconfont {
		margin: 10rpx;
	}

	// 字体图片
	.top-icon {
		width: 18rpx;
		height: 18rpx;
	}

	// 空间字体
	.top-text {
		z-index: 99;
		margin-right: 10rpx;
	}

	// 左下
	.left-bottom {
		z-index: 99;
		position: absolute;
		bottom: 20rpx;
		width: 90%;
	}

	// 直播标题
	.bottom-title {
		z-index: 99;
		font-size: 24rpx;
		width: 80%;
		margin-bottom: 10rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	// 底部列表
	.bottom-list {
		z-index: 99;
		display: flex;
		justify-content: space-between;
		font-size: 22rpx;
		height: 46rpx;
		line-height: 46rpx;
	}

	// 列表左右
	.list-left-right {
		display: flex;
		justify-content: space-between;
	}

	// 头像
	.list-head {
		width: 46rpx;
		height: 46rpx;
		border-radius: 50%;
		// background-color: blue;
	}

	// 头像图片
	.list-head-img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	// 昵称
	.list-nickname {
		padding-left: 10rpx;
	}

	// 人数
	.list-people {
		padding-right: 10rpx;
	}

	// 下列表-背景
	.bgimage {
		width: 100%;
		height: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
	}

	// 背景-图片
	.bgimage-image {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}
</style>